'use client';

import { useState } from 'react';
import { useMultiChainWallet } from '@/contexts/MultiChainWalletContext';
import { CreateBSCTokenForm } from '@/components/CreateBSCTokenForm';
import type { SupportedChain } from '@/contexts/MultiChainWalletContext';

type TabType = 'solana' | 'bsc' | 'xlayer';

interface ChainInfo {
  id: SupportedChain;
  name: string;
  icon: string;
  color: string;
  description: string;
  available: boolean;
}

const CHAIN_TABS: ChainInfo[] = [
  {
    id: 'solana',
    name: 'Solana',
    icon: '◎',
    color: 'purple',
    description: '高速低费用的去中心化区块链',
    available: true
  },
  {
    id: 'bsc',
    name: 'BSC',
    icon: '🔶',
    color: 'yellow',
    description: '币安智能链 - 兼容以太坊的高性能链',
    available: true
  },
  {
    id: 'xlayer',
    name: 'XLayer',
    icon: '🔷',
    color: 'blue',
    description: 'OKX L2 网络 - 低成本高效率',
    available: true
  }
];

export default function MultiChainCreatePage() {
  const [activeTab, setActiveTab] = useState<TabType>('solana');
  const { connected, chain, isSupported } = useMultiChainWallet();

  const getButtonColorClasses = (color: string) => {
    switch (color) {
      case 'purple':
        return 'bg-purple-600 hover:bg-purple-700';
      case 'yellow':
        return 'bg-yellow-600 hover:bg-yellow-700';
      case 'blue':
        return 'bg-blue-600 hover:bg-blue-700';
      default:
        return 'bg-gray-600 hover:bg-gray-700';
    }
  };

  const renderCreateForm = () => {
    switch (activeTab) {
      case 'solana':
        return (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">◎</div>
            <h3 className="text-xl font-bold text-white mb-2">Solana 代币创建</h3>
            <p className="text-gray-400 mb-6">Solana 代币创建功能即将推出</p>
            <div className="text-sm text-gray-500">
              当前使用现有的 Solana 代币创建流程
            </div>
          </div>
        );
      
      case 'bsc':
        return <CreateBSCTokenForm />;
      
      case 'xlayer':
        return (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">🔷</div>
            <h3 className="text-xl font-bold text-white mb-2">XLayer 代币创建</h3>
            <p className="text-gray-400 mb-6">XLayer 代币创建功能即将推出</p>
            <div className="text-sm text-gray-500">
              敬请期待 XLayer 网络支持
            </div>
          </div>
        );
      
      default:
        return null;
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <div className="container mx-auto px-4 py-8">
        {/* 头部 */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-pixel text-white mb-4">多链代币创建平台</h1>
          <p className="text-gray-400 text-lg">在多个区块链网络上创建和管理你的代币</p>
        </div>

        {/* 链选择标签 */}
        <div className="flex justify-center mb-8">
          <div className="bg-gray-800 border border-gray-700 rounded-lg p-1">
            <div className="flex space-x-0">
              {CHAIN_TABS.map((chainInfo) => (
                <button
                  key={chainInfo.id}
                  onClick={() => setActiveTab(chainInfo.id)}
                  disabled={!chainInfo.available}
                  className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
                    activeTab === chainInfo.id
                      ? `${getButtonColorClasses(chainInfo.color)} text-white`
                      : 'text-gray-400 hover:text-white hover:bg-gray-700'
                  } ${!chainInfo.available ? 'opacity-50 cursor-not-allowed' : ''}`}
                >
                  <div className="flex items-center gap-2">
                    <span className="text-lg">{chainInfo.icon}</span>
                    <span>{chainInfo.name}</span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* 当前选择的链信息 */}
        <div className="max-w-4xl mx-auto mb-8">
          {CHAIN_TABS.map((chainInfo) => {
            if (chainInfo.id !== activeTab) return null;
            
            const isChainConnected = connected && chain === chainInfo.id;
            const isChainSupported = isSupported(chainInfo.id);
            
            return (
              <div key={chainInfo.id} className="bg-gray-800 border border-gray-700 rounded-lg p-6">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <span className="text-3xl">{chainInfo.icon}</span>
                    <div>
                      <h2 className="text-xl font-bold text-white">{chainInfo.name}</h2>
                      <p className="text-gray-400">{chainInfo.description}</p>
                    </div>
                  </div>
                  
                  <div className="text-right">
                    <div className={`flex items-center gap-2 ${
                      isChainConnected ? 'text-green-400' : 
                      isChainSupported ? 'text-yellow-400' : 'text-red-400'
                    }`}>
                      <span className={`w-2 h-2 rounded-full ${
                        isChainConnected ? 'bg-green-400' : 
                        isChainSupported ? 'bg-yellow-400' : 'bg-red-400'
                      }`}></span>
                      <span className="text-sm">
                        {isChainConnected ? '已连接' : 
                         isChainSupported ? '可连接' : '不支持'}
                      </span>
                    </div>
                  </div>
                </div>
                
                {!isChainSupported && (
                  <div className="bg-red-900/20 border border-red-500/30 rounded-lg p-3 mb-4">
                    <div className="text-red-400 text-sm">
                      ⚠️ 当前浏览器不支持 {chainInfo.name} 钱包，请安装相应的钱包扩展
                    </div>
                  </div>
                )}
                
                {isChainSupported && !isChainConnected && (
                  <div className="bg-yellow-900/20 border border-yellow-500/30 rounded-lg p-3 mb-4">
                    <div className="text-yellow-400 text-sm">
                      💡 请连接 {chainInfo.name} 钱包以创建代币
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* 创建表单区域 */}
        <div className="max-w-4xl mx-auto">
          {renderCreateForm()}
        </div>

        {/* 底部信息 */}
        <div className="text-center mt-12 text-gray-500 text-sm">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div>
              <h4 className="font-medium text-white mb-2">多链支持</h4>
              <p>支持 Solana、BSC、XLayer 等多个主流区块链网络</p>
            </div>
            <div>
              <h4 className="font-medium text-white mb-2">统一体验</h4>
              <p>一个界面管理所有链上的代币创建和交易</p>
            </div>
            <div>
              <h4 className="font-medium text-white mb-2">安全可靠</h4>
              <p>采用钱包签名验证，保护用户资产安全</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
